<template>
    <div>


      <div class="container">

        <div id="courseOption">
            <ul>
              <li @click="getAll">全部</li>
              <li v-for="subjectOne in subjectOneList" @click="subjectOneFn(subjectOne.id)">{{subjectOne.title}}</li>

            </ul>
            <ul v-if="subjectTwoList.length!=0">
              <li v-for="subjectTwo in subjectTwoList" @click="subjectTwoFn(subjectTwo.id)">{{subjectTwo.title}}</li>
            </ul>

            <p>
              <button @click="buyCountSort">销售量</button>
              <button @click="viewCountSort">浏览量</button>
            </p>
        </div>


        <div v-for="course in pageInfo.list" class="course-box">
          <p style="width: 300px;height: 168px"><a :href="'http://localhost:8080/#/courseDetail/'+course.id"><img :src="course.cover" style="width: 300px;height: 167px"
           @mouseover="$event.currentTarget.className='enlargeImg'" @mouseout="$event.currentTarget.className='narrowImg'"></a></p>
          <p><a :href="'http://localhost:8080/#/courseDetail/'+course.id">{{course.title}}</a></p>
          <p v-if="course.price==0" style="background: greenyellow;color: white">免费</p>
          <p v-else><font style="font-size: 15px" color="red">￥{{course.price}}</font></p>
        </div>

        <!--分页-->
        <div align="center" class="pageController" >
          <a href="#" @click="pageList(1)"  v-if="pageInfo.hasPrevious">首页</a>
          <a href="#" :class="{page_a:!pageInfo.hasPrevious}" @click="pageList(pageInfo.current-1)">&lt;</a>
          当前第{{pageInfo.current}}页

          <a href="#" @click="pageList(pageInfo.current+1)" :class="{page_a:!pageInfo.hasNext}">&gt;</a>
          <a href="#" @click="pageList(pageInfo.pages)" v-if="pageInfo.hasNext">尾页</a>
          共{{pageInfo.pages}}页
        </div>
      </div>
    </div>

</template>

<script>
  import course from '@/api/course'
  import subject from '../api/subject'
    export default {
        name: "courseList",
      data() {
        return {
          subjectOneList:[],//一级分类集合
          subjectTwoList:[],//二级分类集合
          course:{//查询条件
            subjectParentId:'',//一级分类id
            subjectId:'',//二级分类id
            buyCount:'',//销售量
            viewCount:'',//浏览量
          },
          isPageBag:1,//分页数字颜色变量
          pageInfo:{}//分页数据
        };
      },
      methods: {
          //分页查询
        pageList(current){
          this.isPageBag = current
          course.pageList(current,6,this.course)
            .then(response=>{
               this.pageInfo = response.data

            })
        },
        //初始化课程列表
        initCourseList(){
          course.pageList(1,6,this.course)
            .then(response=>{
              this.pageInfo = response.data
              console.log(response.data.hasPrevious)
            })
        },
        //初始化分类
        initSubjectList(){
          subject.getSubjectList()
            .then(response=>{

              this.subjectOneList = response.data
              console.log("#################"+this.subjectOne)
            })
        },
        //点击一级分类，显示对应二级分类，并根据分类查询
        subjectOneFn(id){
          //遍历一级分类集合
          for(var i=0;i<this.subjectOneList.length;i++){
            var subjectOne = this.subjectOneList[i];
            //根据传入的id将对应的二级分类集合赋值到data中
            if(subjectOne.id == id){
              this.subjectTwoList = subjectOne.children
            }
          }
          //加入一级分类条件
          this.course.subjectParentId = id
          //查询
          this.pageList(1)
        },
        //点击二级分类，添加二级分类条件，并查询
        subjectTwoFn(id){
          //加入二级分类条件
          this.course.subjectId=id
          //查询
          this.pageList(1)
        },
        //重新查询全部课程
        getAll(){
          //清空条件
          this.course = {}
          this.subjectTwoList=[]
          //查询
          this.pageList(1)
        },
        //销售量排序
        buyCountSort(){
          this.course.buyCount = "1"
          this.pageList(1)
        },
        //浏览量排序
        viewCountSort(){
          this.course.viewCount = "1"
          this.pageList(1)
        },

      },
      created(){
          this.initCourseList()
        this.initSubjectList()


      }
    }
</script>

<style scoped>
.course-box{
  border: 1px solid;
  width: 300px;
  height: 250px;
  display: inline-block;
  overflow: hidden;
  text-align: center;
  margin-top: 20px;
  margin-left: 40px;
}

.page_a{
  pointer-events: none;
  color: gray;
}
.pageController a{
  background: #F2F6FC;
  border-radius: 50%;
  display: inline-block;
  height: 50px;
  width: 50px;
  text-decoration: none;
  border: 1px solid;
  color: black;
}
  .pageController{
    line-height: 50px;
  }

#courseOption li{
  display: inline-block;
  list-style: none;
  margin-right: 30px;
}

.enlargeImg{
  transition: all 0.3s;
  transform: scale(1.2);
}
.narrowImg{
  transition: all 0.3s;
  transform: scale(1);
}



</style>
